<template>
    <div class="table-box">
      <div class="table-search">
        <el-form :inline="true" :model="form">
          <el-form-item label="商户ID">
            <el-input v-model="form.mer_id" placeholder="商户ID" />
          </el-form-item>
          <el-form-item label="商户名称">
            <el-input v-model="form.mer_name" placeholder="名称" />
          </el-form-item>
          <el-form-item label="绑定主商户ID">
            <el-input v-model="form.per_mer_id" placeholder="绑定商户ID" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="onAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="card content-box">
        <div class="table">
          <el-table :data="tableData" border v-loading="loading">
            <el-table-column prop="id" label="id" align="center" />
            <el-table-column
              prop="merchant_id"
              label="商户ID"
              align="center"
              width="110"
            />
            <el-table-column
              prop="name"
              label="名称"
              align="center"
              width="200"
            />
            <el-table-column prop="nickname" label="昵称" align="center" width="150" />
            <!-- <el-table-column prop="user_type" label="类型" align="center" /> -->
            <el-table-column prop="third_channel" label="绑定第三方平台" align="center" width="120" />
            <el-table-column prop="third_merchant_id" label="第三方平台主商户ID" align="center" width="150" />
            <el-table-column prop="third_user_id" label="第三方用户ID" align="center" width="150" />
            <el-table-column prop="third_email" label="第三方用户邮箱" align="center" width="200" />
            <el-table-column label="冻结" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.is_frozen ? 'success' : 'danger'">{{
                  scope.row.is_frozen ? "是" : "否"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="数字币钱包" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.open_wallet ? 'success' : 'danger'">{{
                  scope.row.open_wallet ? "已开通" : "未开通"
                }}</el-tag>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="createtime"
              label="创建时间"
              :formatter="formatterTime"
              align="center"
              width="180"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              width="150"
            >
              <template #default="scope">
                <el-button
                  type="danger"
                  @click="handleOperate(scope.$index, scope.row, 'frozen')"
                  >冻结</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination
              :current-page="pageable.pageNum"
              :page-size="pageable.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageable.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import { formatterTime } from "@/utils/utils";
  import {
    payMerSubUserListApi,
    payMerFrozenApi
  } from "@/api/payServerse/merchant";
  import { GlobalStore } from "@/store";
  
  const globalStore = GlobalStore();
  const loading = ref(false);
  const tableData = ref([]);
  // 查询form
  const formData = {
    mer_id: "",
    name: "",
  };
  const form = reactive({ ...formData });
  // 分页
  const pageable = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0,
  });
  
  // 查询参数
  const param = () => {
    return {
      page: pageable.pageNum,
      pagesize: pageable.pageSize,
      mer_id: form.mer_id,
      parent_mer_id: form.parent_mer_id,
      mer_name: form.mer_name,
    };
  };
  // 获取表格数据
  const getTbaleData = async () => {
    loading.value = true;
    try {
      const res = await payMerSubUserListApi(param());
      globalStore.setPayMerchant();
      loading.value = false;
      tableData.value = res.data.results;
      pageable.total = res.data.count;
    } catch (error) {
      loading.value = false;
    }
  };
  // 查询
  const onQuery = () => {
    console.log("onQuery");
    getTbaleData();
  };
  // 重置
  const onReset = () => {
    getTbaleData();
  };
  // 行操作
  const handleOperate = async (index, row, type) => {
    // 冻结
    if (type === "frozen") {
      ElMessageBox.confirm("您是否确认冻结此商户?", "温馨提示", {
        type: "warning",
      }).then(async () => {
        const res = await payMerFrozenApi({ id: row.id });
        getTbaleData();
        ElMessage.success(res.message);
      });
    }
  };
  // 条数
  const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
  };
  // 页码
  const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
  };
  onMounted(() => {
    getTbaleData();
  });
  </script>
  